<template>
	<view class="school-page">
		<!-- 背景 -->
		<view class="school-bg"></view>
		<!-- 机构信息 -->
		<view class="school-info-wrap">
			<view class="school-desc">
				<view class="title">智睿教育培训基地</view>
				<view class="sub-title">{{params.name}}</view>
				<view class="address"> {{params.address}}</view>
				<view class="school-avatar">
					<image  mode="widthFix"  :src="params.imgurl"></image>
				</view>
			</view>
			<!-- 联系我们 -->
			<view class="about-us">
				<view class="group-list">
					<view class="group-item space-between about-titem">
						<view class="left">{{params.email}}</view>
						<view class="icon-profile iconfont icon-text "></view>
					</view>
					<view class="group-item space-between about-titem">
						<view >{{params.mobile}}</view>
						<view class="iconfont icon-phone icon-text "></view>
					</view>
					<view class="group-item space-between about-titem">
						<view class="left">{{params.wechat}}</view>
						<view class="iconfont icon-weixin icon-text "></view>
					</view>
				
				</view>
			</view>
			<!-- 关于培优教育 -->
			<view class="about-peiyou">
				
					<view class="title"> 介绍</view>
					<view class="body">{{params.detailed}}</view>
				
			</view>
		</view>
		<!-- 底部信息 -->
		<view class="footer-bar">
			<view class="footer-icon" @click="handleLocal">
				地址导航
			</view>
			<button class="btn" @click="btnclick">联系我们</button>
		</view>
	</view>
</template>

<script>
export default {
	
	onLoad(option){
		// console.log("shcoll",option)
		this.params = JSON.parse(option.address)
		// console.log("shcoll",this.params)
		
	},
	data() {
		return {
			params: null
			
		};
	},
	
	methods: {
		// 分享
		onShareAppMessage: function(e) {
						let title = '智睿教育培训基地' + this.params.name
						return {
							title: title,
							path: this.$util.routePath()
						}
					},
		// 联系我们触发事件			
		btnclick () {
			uni.makePhoneCall({
			    phoneNumber: this.params.mobile //仅为示例
			});
		},
		// 路线规划
		handleLocal() {
			let plugin = requirePlugin('routePlan');
				let key = 'H7GBZ-3TF3U-NNEVC-4LFIX-BZZRQ-BSB5Q';  //使用在腾讯位置服务申请的key
				let referer = '智睿练习-小程序端';   //调用插件的app的名称
				let endPoint = JSON.stringify({  //终点
			  		'name': '北京西站',
			  		'latitude': 39.894806,
			  		'longitude': 116.321592
				});
				uni.navigateTo({
				url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=1'
				})
	
		}
	}
};
</script>

<style lang="scss" scoped>
.school-page {
	background-color: #f4f4f4;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	overflow-y: auto;
	.school-bg {
		position: absolute;
		background-color: rgb(101, 118, 239);
		height: 320rpx;
		width: 120%;
		border-radius: 0 0 45% 45%;
		left: -10%;
		overflow: hidden;
		cursor: pointer;
	}
	.school-info-wrap {
		position: absolute;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 30rpx;
		.school-desc {
			position: relative;
			margin-top: 100rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: #ffffff;
			box-shadow: 0 2px 20px 2px rgba(150, 150, 150, 0.2);
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.sub-title {
				margin-top: 20rpx;
				font-size: 40rpx;
				line-height: 50rpx;
				color: $uni-text-color-grey;
			}
			.address {
				font-size: 24rpx;
				margin-top: 5rpx;
				margin-bottom: 40rpx;
			}
			
			.school-avatar {
				position: absolute;
				top: 5rpx;
				right: 20rpx;
		
				image {
					border-radius: 20rpx;
					width: 200rpx;
					// height: 300rpx;
				}
			}
		}
		// 联系我们
		.about-us {
			margin-top: 20rpx;
			background-color: #ffffff;
			overflow: hidden;
			box-shadow: 0 2px 20px 2px rgba(150, 150, 150, 0.2);
			border-radius: 10rpx;
			.about-titem {
				    box-sizing: border-box;
				    width: 100%;
				    padding: 26rpx 32rpx;
				    font-size: 28rpx;
				    line-height: 54rpx;
					border-bottom: 1px solid #e4e7ed;
						.card {
							border-top: 1rpx solid #eeeeee;
							padding: 20rpx;
							display: flex;
							justify-content: space-between;
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
						.icon-text {
							margin-right: 30rpx;
							font-size: 60rpx;
						}
					
			}
		}
		// 关于培优
		.about-peiyou {
			margin-top: 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 140rpx;
			padding: 50rpx ;
			.title {
				line-height: 60rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
				border-bottom: 1rpx solid #e4e7ed;
			}
			.body {
				text-indent:60rpx;
				margin: 20rpx 0;
			
			}
		}
	}
	// 底部信息
	.footer-bar {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		height: 120rpx;
		z-index: 999;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.footer-icon {
			padding: 0 30rpx;
			width: 30%;
			display: flex;
			justify-content: space-between;
		}
		.btn {
				text-align: center;
				flex: 1;
				border-radius: 50rpx;
			    font-size: 30rpx;
			    height: 80rpx;
			    line-height: 80rpx;
				color: #ffffff;
				border-color: #ff9900;
				background-color: #ff9900;
		}
	}
}
</style>
